import React, { Component } from 'react';
import { NavBar, } from "antd-mobile"
import SearchInput from "../searchInput/SearchInput"
import myaxios from "../../utile/myaxios";
import './Category.scss'
class Category extends Component {
    state = {
        categories: [],  //返回的菜单数据
        categories_content: [],   //有百年菜单渲染内容
        select_index: 0,    //当前选中左边的菜单
    }
    // 左边菜单点击触发
    handleLeftitem = (e) => {
        let select_index = e.target.getAttribute('data-index')
        this.setState({
            select_index: parseInt(select_index),
            categories_content: this.state.categories[select_index].children,
        })
    }
    // 右边菜单点击触发
    handleProductItemClick = (e) => {
        let cid = e.target.getAttribute('data-index')
        console.log(cid);
        console.log(this.props);
        this.props.history.push('goodList/' + cid)
    }
    // 获取分类菜单得数据
    getCategories = (params) => {
        myaxios.get("categories").then(res => {
            console.log(res);
            // 缓存请求数据
            this.setCategories(res);
        }).catch((err) => {
            console.log(err);
        })
    }

    setCategories = (res, is_storaged) => {
        let categories_cache = {};
        // 缓存到本地
        if (!is_storaged) {
            // 直接获取本地缓存中得数据即可
            categories_cache = {
                date:Date.now(),
                categories:res,
            };
            localStorage.setItem("categories_cache", JSON.stringify(categories_cache))
        }
        // 缓存到本地中
        console.log(res);
        this.setState({
            categories: res,
            categories_content: res[0].children,
        })
    }



    componentDidMount() {
        // 页面刷新时，先判断本地缓存是否过期
        // 没有过期情况下直接获取本地缓存
        let categories_cache = localStorage.getItem("categories_cache")
        // 
        if (categories_cache && JSON.parse(categories_cache).date) {
            // 当前时间
            let current_time = Date.now();
            // 存储时间
            let storage_time = JSON.parse(categories_cache).date;
            if (current_time - storage_time > 60 * 60 * 1000) {
                // 如果一小时后过期
                this.getCategories();
            } else {
                // true,代表是否已经缓存过
                this.setCategories(JSON.parse(categories_cache).categories, true);
            }
        } else {
            this.getCategories();
        }
    }
    render() {
        return (
            <div className="yg-category">
                {/* Top优购name */}
                <div className="yg-home-nav">
                    <NavBar className="home-nav">优购商城</NavBar>
                </div>
                {/* 搜索栏 */}
                <div className="yg-search">
                    <SearchInput></SearchInput>
                </div>
                <div className="yg-category-centent">
                    {/* 左侧滚动条 */}
                    {/* 利用冒泡处理leftitem */}
                    <div className="yg-category-left"
                        onClick={this.handleLeftitem}>
                        {this.state.categories.map((v, index) => {
                            return <div data-index={index} className={this.state.select_index === index ? "active content-left-item" : "content-left-item"} key={v.cat_id}>
                                {v.cat_name}
                            </div>
                        })}
                    </div>
                    {/* 右侧滚动条 */}
                    <div className="yg-category-right">
                        {this.state.categories_content && this.state.categories_content.map(v => {
                            return (
                                <div className="content-right-item" key={v.cat_id}>
                                    {/* 二级标题开始 */}
                                    <div className='right-item-title'>
                                        {"/"}{v.cat_name}{"/"}
                                    </div>
                                    {/* 产品列表开始 */}
                                    <div
                                        className="product-list"
                                        onClick={this.handleProductItemClick}
                                    >
                                        {v.children && v.children.map(item => {
                                            return (
                                                <div
                                                    key={item.cat_id}
                                                    className="product-list-item"
                                                    data-index={item.cat_id}
                                                >
                                                    <div className="imagerWrapper">
                                                        <img src={item.cat_icon} alt="" data-index={item.cat_id} ></img>
                                                    </div>
                                                    <div className="item-title" data-index={item.cat_id}>{item.cat_name}</div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>
        );
    }
}

export default Category;
